<template>
    <div>
        <el-dialog title="提示" v-model="dialogVisible" width="30%">
            <span>确认要删除该条数据吗?</span>
            <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
            </template>
        </el-dialog>
        <div class="search">
            <el-form label-width="80px">
                <el-row>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="商家名称">
                            <el-input v-model="searchObject.name" size="small" placeholder="商家名称" name="name">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="分类">
                            <el-input v-model="searchObject.shopCatalog" size="small" placeholder="分类"
                                      name="shopCatalog">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="padding: 0 8px;">
                        <el-form-item label="地址">
                            <el-input v-model="searchObject.address" size="small" placeholder="地址" name="address">
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" style="padding: 0 10px;margin-top: 5px;">
                        <el-row type="flex" justify="end">
                            <el-button size="small" type="primary" @click="search">搜索</el-button>
                            <el-button size="small" plain @click="clearSearch">清除条件</el-button>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="data-content">
            <div class="tool-add">
                <el-button type="primary" size="small" @click="addView">新增</el-button>
            </div>

            <el-table v-loading="loading" :data="tableData.list" @sort-change="changeTableSort"
                      style="width: 100%;font-size: 12px;">
                <el-table-column label="商家名称" prop="name" width="200">
                </el-table-column>
                <el-table-column label="所属连锁" prop="name" width="160" :formatter="showChain">
                </el-table-column>
                <el-table-column label="所属分类" prop="shopCatalogName" width="100">
                </el-table-column>
                <el-table-column label="费用金额" prop="fee" width="100">
                </el-table-column>
                <el-table-column label="消费券名称" prop="couponName" width="100">
                </el-table-column>
                <el-table-column label="消费券金额" prop="couponFee" width="100">
                </el-table-column>
                <el-table-column label="是否上线" prop="shopState" width="100" :formatter="showState">
                </el-table-column>
                <el-table-column label="创建时间" prop="addDate">
                </el-table-column>
                <el-table-column width="260" align="center" fixed="right" label="操作">
                    <template #default="scope">
                        <el-switch v-model="scope.row.shopState" active-value="normal" inactive-value="disable"
                                   active-text="已上线"
                                   inactive-text="已下线"
                                   inline-prompt
                                   @change="updateShopState(scope.row)"/>
                        <el-button text size="small" class="operation_bt" :icon="Edit" type="info"
                                   @click="showView(scope.row)">详情
                        </el-button>

                        <el-button text size="small" class="operation_bt" :icon="Edit" type="primary"
                                   @click="editView(scope.row)">
                            编辑
                        </el-button>

                        <el-button text :icon="deleteIcon" class="operation_bt" type="danger" size="small"
                                   style="cursor: pointer;"
                                   @click="deleteData(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="page">
                <el-pagination v-model:current-page="searchObject.no" v-model:page-size="tableData.size"
                               :page-sizes="[10, 20, 50, 100]"
                               pager-count="5" :background="background"
                               layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                               :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {Delete, Edit} from '@element-plus/icons-vue'
import common from "@/mixins/common.js";
import {searchStore} from "@/stores/modules/explorationShop"
import {mapActions, mapState} from 'pinia'

export default {
    name: "shop_index",
    mixins: [common],
    data() {
        return {
            Edit: Edit,
            deleteIcon: Delete,
            searchObject: {
                no: 1,
                size: 8,
                name: '',
                shopCatalog: '',
                address: '',
                shopState: ''
            },
            adPositionOptions: [],
            dialogVisible: false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: false,
            tableData: {
                totalPage: 0,
                total: 0,
                size: 10
            },
            shopCatalogOptions: [],
            background: true
        }
    },
    computed: {
        ...mapState(searchStore, ['searchData']),
    },
    mounted() {

        if (this.searchData) {
            this.searchObject = this.searchData;
        }
        this.getSearchList();

        this.loadShopCatalogOptions();
    },
    methods: {
        ...mapActions(searchStore, ['updateSearchObject']),
        async getSearchList() {
            this.loading = true;
            let data = this.searchObject;
            let res = await this.$http.form("/tenantRest/shop/search.htm", data);
            if (res.code === 0) {
                this.tableData = res;
            }
            this.loading = false;
            this.updateSearchObject(this.searchObject);
        },
        addView() {
            this.$router.push({
                path: 'add'
            });
        },
        showState(row) {
            if (row.shopState === "normal") {
                return "已上线";
            } else {
                return "已下线";
            }
        },
        async updateShopState(row) {
            let params = {};
            params.id = row.id;
            params.shopState = row.shopState;
            await this.$http.form("/tenantRest/shop/update.htm", params);
            this.search();
        },
        showView(row) {
            let data = {};
            data.id = row.id;
            this.$router.push({
                path: 'view',
                query: data
            });
        },
        editView(row) {
            let data = {};
            data.id = row.id;
            this.$router.push({
                path: 'update',
                query: data
            });
        },
        deleteData(row) {
            this.selectId = row.id;
            this.dialogVisible = true;
        },
        showChain(row) {
            if (row.parent) {
                return row.parentName;
            } else {
                return "单店"
            }
        },
        async loadShopCatalogOptions() {
            let self = this;
            var param = {};
            param.sortMethod = "asc";
            param.sortField = "id";
            param.level = 1;
            param.size = 500;
            param.fetch = 0;
            let res = await this.$http.form("/tenantRest/shopcatalog/list.htm", param);
            if (res.code === 0) {
                self.shopCatalogOptions = res.list;
            }
        },
        clearSearch() {
            this.searchObject.key = "";
            this.searchObject.name = "";
            this.searchObject.name = "";
            this.searchObject.shopCatalog = "";
            this.searchObject.address = "";
            this.searchObject.shopState = "";
        },
        async handleClose() {

            this.dialogVisible = false;
            if (this.selectId) {
                let params = {};
                params.id = this.selectId;
                let res = await this.$http.form("/tenantRest/shop/delete.htm", params);
                if (res.code === 0) {
                    this.$message({
                        message: '删除数据成功',
                        type: 'success'
                    });
                    await this.getSearchList();
                } else {
                    this.$message.error(res.msg);
                }
            }

        }

    },
}
</script>

<style scoped>

</style>
